<template>
    <div class="product bg b">
        <div class="item" v-for="(item, index) in productData?.params" :key="item.imgUrl" @click="toClassify(item)">
            <!-- <img :alt="item.title" v-lazy="getHomeImageUrl(item.img)"> -->
            <span>
                {{ homeProduct[index] }}
            </span>
        </div>
    </div>
</template>
<script>
import homeProduct from "@/common/homeProduct";
export default {
    name: "ProductComponent",
    props: {
        productData: Object,
    },
    data() {
        return {
            homeProduct,
        }
    },
    methods: {
        toClassify(item) {
            const id = item.url.split("?")[1].split("=")[1];
            this.$router.push({ name: "classify", query: { key: id } })
        },
    }
}
</script>
<style lang="scss" scoped>
.product {
    padding: 15px 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .item {
        flex-basis: 20%;
        padding: 5px;


        &:nth-of-type(n+6) {
            margin-top: 10px;
        }

        img {
            width: 80%;
        }

        span {
            font-size: 14px;
        }
    }
}
</style>